<template>
	<div>
		<div class="bg-white pd-24 mg-24 br-16 fs-28">
			<div class="pb-24 mb-24 ordermsg_title fw-b">订单金额</div>
			<div v-if="(info.DetailList && info.DetailList.length > 1) || info.BookHomeAddOrderList" class="pb-24 mb-24  travel">
				<div class="mb-6">项目金额</div>
				<div class="mb-6"> ￥{{ servicePay? servicePay.toFixed(2) : '0'}}</div>
			</div>
			<div class="pb-24 mb-24 ordermsg_title travel">
				<div>
					<div class="mb-6">出行方式</div>
					<div v-if="info.CouponMoney != 0">优惠券</div>
				</div>
				<div class="ordermsg_pay">
					<div class="mb-6"> <span v-if="info.TripType == 1">公交：</span><span v-else>出租：</span> ￥{{ info.PostagePrice? info.PostagePrice.toFixed(2) : '0'}}</div>
					<div v-if="info.CouponMoney != 0"><span >-￥{{ info.CouponMoney }}</span></div>
				</div>
			</div>
			<div class="flex flex-d-c">
				<div class="tar">	
					<span class="fw-b">合计</span>
					<span class="fs-32">￥{{ info.PriceSum }}</span>
				</div>
				<div v-if="info.CouponMoney !== 0" class="tar">
					<span>实付</span> <span class="ordermsg_total">￥{{ info.ReceiptMoney }}</span>
				</div>
			</div>
		</div>
		<div class="bg-white pd-24 mg-24 br-16">
			<div class="pb-24 mb-24 ordermsg_title fs-28 fw-b">订单信息</div>
			<div>
				<div class="mb-10">
					<span class="color-gray7 mr-10">订单编号：</span>
					<span class="fs-26">{{ info.Sn }}</span>
				</div>
				<div class="mb-10">
					<span class="color-gray7 mr-10">下单时间：</span>
					<span class="fs-26">{{ info.OrderAddTime }}</span>
				</div>
				<div class="mb-10">
					<span class="color-gray7 mr-10"> 支付时间：</span>
					<span class="fs-26">{{ info.PayTime }}</span>
				</div>
				<div class="mb-10">
					<span class="color-gray7  mr-10">支付方式：</span>
					<span class="fs-26">{{ info.PayWayName }}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		info: {
			type: Object,
		}
  },
	data() {
    return {
		}
	},
	created(){
		
	},
	computed:{
		servicePay(){
			let _servicePay = 0
			if((this.info.DetailList && this.info.DetailList.length > 1) || this.info.BookHomeAddOrderList){
				this.info.DetailList.forEach(ele =>{
					_servicePay += ele.Price*ele.Amount
				})
				if(this.info.BookHomeAddOrderList){
					this.info.BookHomeAddOrderList.forEach(ele => {
						_servicePay += ele.PriceSum
					})
				}
			}
			return _servicePay
		}
	}
}
</script>
<style lang="scss" scoped>
	.ordermsg_title{
		border-bottom: 2px solid #F2F3FC;;
	}
	
	.travel{
		display: flex;
		justify-content: space-between;
	}
	.ordermsg_pay{
		display: flex;
		flex-direction: column;
		align-items: end;
	}
	.ordermsg_total{
		font-size: 32px;
		color: #EC612A;;
	}
	
	
</style>
